import {Component, OnInit} from '@angular/core';
import {_HttpClient} from '@delon/theme';
import {TeacherService} from '../teacher.service';
import {FormBuilder, FormGroup, Validators} from '@angular/forms';
import {environment} from '@env/environment';
import {Teacher} from '../teacher';
import {ActivatedRoute} from '@angular/router';
import {Location} from '@angular/common';
import {NzMessageService} from 'ng-zorro-antd';

@Component({
    selector: 'app-add',
    templateUrl: './add.component.html',
    styles: [`
        :host ::ng-deep .avatar-uploader,
        :host ::ng-deep .avatar-uploader-trigger,
        :host ::ng-deep .avatar {
            width: 150px;
            height: 150px;
            display: block;
        }

        :host ::ng-deep .avatar-uploader {
            display: block;
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
        }

        :host ::ng-deep .avatar-uploader-trigger {
            display: table-cell;
            vertical-align: middle;
            font-size: 28px;
            color: #999;
        }

        .save-form-button {
            width: 100%;
        }
    `]
})
export class AddComponent implements OnInit {

    validateForm: FormGroup;
    avatarUrl: string;
    imgaUrl: string;
    treach: Teacher = {};

    vedioUploadType = 0;
    vedioUrl: string;

    url_img = 'Upload/';
    uploadPath = this.url_img + 'simupload';
    parserPercent = value => value.replace('%', '');
    formatterPercent = value => `${value}%`;

    parserYear = value => value.replace('年', '');
    formatterYear = value => `${value}年`;

    constructor(
        private teacherService: TeacherService,
        private fb: FormBuilder,
        private activiRouter: ActivatedRoute,
        private location: Location,
        private msgservice: NzMessageService,
    ) {


        this.validateForm = this.fb.group({
            userName: ['', [Validators.required]],
            passper: [100],
            id: [0],
            tyear: [3],
            dyear: [3],
            content: [''],
        });

        const id = activiRouter.snapshot.paramMap.get('id');
        if (id) {
            this.teacherService.getTeacher(id).subscribe(res => {
                this.treach = res;

                this.imgaUrl = this.treach.headimg;
                this.avatarUrl = environment.SERVER_URL + this.url_img + this.imgaUrl;
                this.validateForm.patchValue({
                    id: this.treach.id,
                    userName: this.treach.username,
                    passper: this.treach.passper,
                    dyear: this.treach.dyear,
                    tyear: this.treach.tyear,
                    content: this.treach.content
                });
            });
        }
    }

    ngOnInit() {
    }


    beforeUpload() {

    }

    handleChange($event) {
        this.imgaUrl = $event['file']['response'];
        this.avatarUrl = environment.SERVER_URL + this.url_img + this.imgaUrl;
    }

    save() {
        this.treach.id = this.validateForm.value['id'];
        this.treach.username = this.validateForm.value['userName'];
        this.treach.content = this.validateForm.value['content'];
        this.treach.tyear = this.validateForm.value['tyear'];
        this.treach.dyear = this.validateForm.value['dyear'];
        this.treach.passper = this.validateForm.value['passper'];
        this.treach.headimg = this.imgaUrl;
        console.log(JSON.stringify(this.treach));
        this.teacherService.addTeacher(this.treach).subscribe(res => {
            this.msgservice.success('保存成功');
            this.location.back();
        }, (error1 => {
            console.error(error1);
        }));
    }
}
